class Rectangle {
    // :宽,高,横坐标,纵坐标,横向速度,纵向速度,对应的 dom 对象
    constructor(width, height, left, top, xSpeed, ySpeed, dom) {
        console.log("🚀 ~ file: Rectangle.js:4 ~ Rectangle ~ constructor ~ left:", left)
        this.width = width
        this.height = height
        this.left = left
        this.top = top
        this.xSpeed = xSpeed
        this.ySpeed = ySpeed
        this.dom = dom
        this.render()
    }

    render() {
        this.dom.style.left = this.left + 'px'
        this.dom.style.top = this.top + 'px'
        this.dom.style.width = this.width + 'px'
        this.dom.style.height = this.height + 'px'
    }

    /** 
     * description: 矩形一段时间的移动距离
     * param {*} duration 持续时间
     * return {*}
     */
    move(duration) {
        const xDis = duration * this.xSpeed
        const yDis = duration * this.ySpeed
        this.left += xDis
        this.top += yDis

        // 子类覆盖的方法
        this.onMove && this.onMove()
        // 渲染
        this.render()
    }

}